<section class="crayons-layout bg-base-inverted max-w-100">
  <div class="registration js-registration">
    <div class="registration__content">
      <% if Settings::General.resized_logo.present? %>
        <a href="/">
          <img class="registration__logo" src="<%= Settings::General.original_logo %>" alt="<%= community_name %>">
        </a>
      <% end %>

      <h1 class="registration__title">
        <% if params[:state] == "new-user" && ForemInstance.invitation_only? %>
          <%= I18n.t("devise.registrations.title.invite_only_commuty", community_name: community_name) %>
        <% else %>
          <% if params[:state] == "new-user" %>
            <%= I18n.t("devise.registrations.title.join_community", community_name: community_name) %>
          <% else %>
            <%= I18n.t("devise.registrations.title.welcome_back_community", community_name: community_name) %>
          <% end %>
        <% end %>
      </h1>

      <% if params[:state] == "new-user" && ForemInstance.invitation_only? %>
        <p class="registration__description -mb-6">
          <%= t("devise.registrations.invite_only_disclaimer_html", contact_link: contact_link) %>
        </p>
      <% else %>
        <p class="registration__description">
          <%= render "shared/authentication_title" %>
        </p>
      <% end %>
    </div>

    <div class="registration__actions">
      <% if display_registration_fallback?(params[:state]) %>
        <h2 class="mt-8" style="text-align: center;" aria-live="polite"><%= t("devise.registrations.errors.bummer") %></h2>
        <p class="mb-8" style="text-align: center;" aria-live="polite"><%= t("devise.registrations.errors.mobile_app_no_new_account_html", community_name: community_name, path: URL.url) %></p>
      <% end %>

      <%= render partial: "shared/authentication/providers_registration_form" %>

      <% if params[:state] == "new-user" %>
        <% unless ForemInstance.invitation_only? %>
          <div class="mt-6 align-center fs-s fw-normal fs-italic px-0 s:px-9 color-secondary">
            <%= t("devise.registrations.agreement.sign_up_html", privacy_path: privacy_path, terms_path: terms_path, code_of_conduct_path: code_of_conduct_path) %>
          </div>
        <% end %>

        <hr class="registration__hr" />

        <div class="crayons-subtitle-3 color-grey-700 fw-normal align-center">
          <%= t("devise.registrations.already_have_an_account_html", sign_up_path: subforem_aware_sign_up_url(sign_up_path(signup_subforem: RequestStore.store[:subforem_id]))) %>
        </div>
        <div id="mobile-version" class="crayons-subtitle-3 color-grey-700 fw-normal align-center"></div>

      <% else %>
        <div class="registration__actions-email" id="sign-in-password-form">
          <% if Settings::Authentication.allow_email_password_login %>
            <% unless authentication_enabled_providers.empty? %>
              <div class="registration__hr-container">
                <hr class="registration__hr" />
                <div class="registration__hr-label"><%= t("devise.registrations.or") %></div>
              </div>
            <% end %>
            <%= render partial: "shared/authentication/email_login_form" %>

            <div class="mt-6 align-center fs-s fw-normal fs-italic px-0 s:px-9 color-secondary">
              <%= t("devise.registrations.agreement.sign_in_html", privacy_path: privacy_path, terms_path: terms_path, code_of_conduct_path: code_of_conduct_path) %>
            </div>

            <hr class="registration__hr" />

            <% if ForemInstance.invitation_only? %>
              <p class="registration__description -mb-6 align-center pb-6">
                <%= t("devise.registrations.invite_only_disclaimer_html", contact_link: contact_link) %>
              </p>
            <% else %>
              <div class="crayons-subtitle-3 color-grey-700 fw-normal align-center pb-6">
                <%= t("devise.registrations.create_account_html", community_name: community_name, sign_up_path: subforem_aware_sign_up_url(sign_up_path(state: "new-user", signup_subforem: RequestStore.store[:subforem_id]))) %>
              </div>
            <% end %>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%= javascript_include_tag "signupSubforemStorage", defer: true %>

<script>
  let registrationsPage = document.querySelector('.js-registration');
  let topbarElement = document.querySelector('#topbar');
  // Check if the registrations or notifications element exists and the topbar element exists.
  if ((registrationsPage && topbarElement) || (notificationsPage && topbarElement)) {
      topbarElement.style.display = 'none';
      document.body.style.paddingTop = '0';
      // This is needed to make sure that the bottom part of page is white when screen is zoomed-out.
      document.body.style.backgroundColor = 'white';
  }
  // Reverse the above when the back button is clicked.
  window.addEventListener('popstate', () => {
    if (registrationsPage && topbarElement) {
      topbarElement.style.display = 'block';
      document.body.style.removeProperty('padding-top');
      document.body.style.removeProperty('background-color');
      document.body.classList.add('hide-popover-billboard');
    }
  });
</script>
